 <template>
            <div>
            <el-card style="height:500px">
                 
                    <div style="text-align:left;line-height: 20px;"  >
                       <span >课程列表</span>
                    </div>
               
            <el-table  :data="tableData" style="width: 100%">  
            <el-table-column prop="date" label="序号" width="180px" ></el-table-column>
            <el-table-column prop="name" label="课程名称" width="180px"> </el-table-column>
            <el-table-column prop="address" label="创建时间"> </el-table-column>
            <el-table-column prop="" label="可见状态"><el-switch v-model="a" /> </el-table-column>
            <el-table-column prop="" label="操作">
                <el-button><el-icon><EditPen /></el-icon></el-button>
                <el-button><el-icon><Files /></el-icon></el-button>
                <el-button><el-icon><Monitor /></el-icon></el-button>
                <el-button><el-icon><School /></el-icon></el-button>
                </el-table-column>   
            </el-table>
            </el-card>
            </div>
     
  </template>

<script>
import {ref} from 'vue'
import {EditPen,Files,Monitor,School} from '@element-plus/icons-vue'

export default {
      data() {
        return {
          tableData: [
        { date: '1',name: '张艺翱1', address: '2022-04-15', }, 
        { date: '2',name: '张艺翱2', address: '2022-04-15' },
        { date: '3',name: '张艺翱3', address: '2022-04-15' },
        { date: '4',name: '张艺翱4', address: '2022-04-15' },
          ],
          a :ref(true)
        }
      },
      components:{
            EditPen,
            Files,
            Monitor,
            School

      }

    }
</script>
<style >

</style>